<script setup lang="ts">
import { useTabbar } from '@/common/use/tabbar';
import { onReachBottom } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
// typescript
const tabbar = ref([
  {title: "全部", value: 0, list: [1,2,3]},
  {title: "待付款", value: 1, list: [1,2]},
  {title: "待收货", value: 2, list: []},
  {title: "已完成", value: 3, list: []},
  {title: "已取消", value: 4, list: []}
]);
// tab变化
const onTabbarChange = (index: number): void => {
  console.log(index, "变化了");
}
const {
  onSwipierChange,
  onTabbarHeaderChange,
  tabbarState
} = useTabbar(onTabbarChange);

onReachBottom(() => {
  console.log("触底了");
  
});
</script>

<!-- 订单列表 -->
<template>
  <view class="container">
    <!-- 标签头部 -->
    <view class="tabbar-header">
      <template v-for="(item, index) in tabbar" :key="index">
        <view @click="onTabbarHeaderChange(index)" :class="{ actived: index == tabbarState.actived }">
          {{ item.title }}
        </view>
      </template>
    </view>
    <!-- 标签内容 -->
    <view class="tabbar-content">
      <swiper class="swiper" :current="tabbarState.actived" @change="onSwipierChange">
        <template v-for="(item, index) in tabbar">
          <swiper-item>
            <template v-for="goods in item.list">
              <w-order-item></w-order-item>
            </template>
          </swiper-item>
        </template>
			</swiper>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
@import "@/static/styles/tabbar.scss";

.tabbar-content {
  :deep(.w-order-item) {
    margin-bottom: 20rpx;
  }
}
</style>
